<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  targetRoute: {
    type: String,
    required: true,
  },
  noTranslateX: {
    type: Boolean,
    default: false,
  },
  nobg: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["click"]);

const router = useRouter();
const isClicked = ref(false);

function handleClick() {
  isClicked.value = true;
  if (props.targetRoute) {
    emit("click");
    setTimeout(() => {
      router.push(props.targetRoute);
    }, 400);
  } else {
    setTimeout(() => {
      emit("click");
      isClicked.value = false;
    }, 400);
  }
}
</script>

<template>
  <div
    :class="{
      'stc-button': true,
      nobg: nobg,
      clicked: isClicked,
      'clickable-button': !noTranslateX,
      'clickable-button-no-x': noTranslateX,
    }"
    @click="handleClick"
  >
    {{ title }}
  </div>
</template>

<style scoped>
.stc-button {
  width: 600px;
  height: 120px;
  border: 3px solid rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-family: "stc-medium";
  font-size: 38px;
  text-align: center;
  line-height: 118px;
}

.stc-button.nobg {
  background: transparent;
  border: none;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
}

.clickable-button,
.clickable-button-no-x {
  cursor: pointer;
  transform-origin: center;
  transition: all 0.3s ease;
}

.clickable-button.stc-button,
.clickable-button-no-x.stc-button {
  overflow: hidden;
}

.clickable-button::before,
.clickable-button-no-x::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.clickable-button:hover::before,
.clickable-button-no-x:hover::before {
  left: 100%;
}

.clickable-button.clicked {
  animation: clicked 0.3s ease-in;
}

.clickable-button-no-x.clicked {
  animation: clicked-no-x 0.3s ease-in;
}

@keyframes clicked {
  0% {
    transform: translate(-50%, 0) scale(1);
  }

  50% {
    transform: translate(-50%, 0) scale(1.04);
  }

  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes clicked-no-x {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
</style>
